<template>
  <div class="user">
    <el-dropdown trigger="click" class="g-dropdown" @command="handleCommand">
      <span class="el-dropdown-link" style="color: #ffffff;">
        {{this.user.loginUserName === 'Undefined' ? '未定义' : this.user.loginUserName}}<i
          class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item v-if="this.user.login35Mail !== 1" command="updatePassword">修改密码</el-dropdown-item>
        <el-dropdown-item command="logout">退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <UserPasswordUpdate ref="userPasswordUpdate" />
  </div>
</template>

<script>
import UserPasswordUpdate from '@/components/header/backendHeader/opation/right/user/UserPasswordUpdate.vue'
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState([
      'user',
      'loginUrl'
    ])
  },
  data () {
    return {
    }
  },
  methods: {
    handleCommand (command) {
      if (command === 'updatePassword') {
        this.updatePassword()
      } else if (command === 'logout') {
        this.logout()
      }
    },
    updatePassword () {
      this.$refs['userPasswordUpdate'].show()
    },
    logout () {
      this.$post('/user/logout', null).then(response => {
        if (parseInt(response) === 1) {
          window.location.href = this.loginUrl
        }
      })
    }
  },
  components: {
    UserPasswordUpdate
  }
}

</script>

<style scoped>
.user {
  margin: 0 8px;
}
.g-dropdown {
  cursor: pointer;
}
</style>
